<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    {load href="/static/js/layer/skin/default/layer.css" /}
    <style>
        tr,th{
            text-align: center;
        }
        th{
            color: #797979;
        }
        #keyword{
            width: 300px;
        }
        .breadcrumb{
            background-color: #515151;
        }
        .breadcrumb span{
            color: #ffffff;
        }
        .ml15{
            margin-left: 15px;
        }
        .c2{
            cursor: pointer;
            text-align: center;
            display: inline-block;
            width: 100px;
            height: 35px;
            line-height: 15px;
            margin-right: 10px;
        }
        .mytab{
            font-size:15px;
            border-bottom: 1px solid #C8C8C8;
            margin-bottom: 20px;
        }

        .mytab .active{
            border-bottom: 4px solid #505050;
            color: #ff5800;
        }
        .mynav{
            height:56px;
            line-height: 60px;
            border-bottom: 1px dashed silver;
            margin-bottom: 20px;
        }
        .form-group{
            margin-bottom: 20px;
        }
        .filelabel{
            height: 80px;
            width: 80px;
            background-image: url("/static/img/file.png");
            background-size: cover;
            margin-left: 30px;
            margin-right: 30px;
        }
        .filelabel input{
            width: 1px;
        }
        .pcolor{
            transform:translateY(8px);
            vertical-align: bottom;
            height: 34px;
            width: 33px;
            display: inline-block;
            cursor: crosshair;
        }
        .bluelable{
            vertical-align: middle;
            background-color: #17B294;
            display: inline-block;
            height: 15px;
            width: 5px;
            margin-right: 10px;
        }
        .mb10{
            margin-bottom: 10px;
        }
        .add{
            margin-left: 10px;
            margin-right: 10px;
            color: #419eff;
            cursor: pointer;
        }
        .del{
            cursor: pointer;
            margin-left: 10px;
            margin-right: 10px;
            color: #FD5800;
        }
        .mytab{
            font-size:15px;
            border-bottom: 1px solid #C8C8C8;
            margin-bottom: 20px;
        }

        .mytab .active{
            border-bottom: 4px solid #505050;
            color: #ff5800;
        }
        .redfont{
            color: red;
        }
        input[type=number]{
            width: 80px!important;
        }
        #layerhtml{
            display: none;
        }
        .redstar:before{
            content: "*";
            color: red;
        }
    </style>
</head>
<body>
<div style="padding-left: 20px;padding-right: 20px;">
    <div id="layerhtml">
        <div class="container-fluid">
            <div class="container-fluid" style="margin-top: 20px;margin-bottom: 20px;">
                <div class="form-inline">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="门店名称" id="shopname"/>
                    </div>
                    <button class="btn btn-primary search">搜索</button>
                </div>
            </div>
            <table class="table table-bordered">
                <thead>
                <tr class="active">
                    <th class="text-center">门店编号</th><th class="text-center">门店名称</th><th class="text-center">操作</th>
                </tr>
                </thead>
                <tbody class="text-center">
                {volist name="shoplist" id="v"}
                <tr class="shoptr"><td>{$v.id}</td><td class="shoptd">{$v.shopname}</td><td><input type="checkbox" class="form-control selectshop" value="{$v.id}" data-shopname="{$v.shopname}"></td></tr>
                {/volist}
                </tbody>
            </table>
        </div>
    </div>
    <ol class="breadcrumb">
        <li><span href="#">全部应用</span></li>
        <li><span href="#">会员卡</span></li>
        <li class="active"><span>新建会员卡</span></li>
    </ol>

    <form class="container-fluid row" onsubmit="return false;" id="myform">
        <div class="mytab">
            <span class="c2" onclick="window.location.href='{:url('Card/mycard')}'">会员卡列表</span>
            <span class="c2" onclick="window.location.href='{:url('Card/memberlist')}'">会员信息</span>
            <span class="c2" onclick="window.location.href='{:url('Card/memberopereate')}'">会员运营</span>
            <span class="c2" onclick="window.location.href='{:url('Card/memberdata')}'">会员数据</span>
            <span class="c2 active">新建会员卡</span>
            <span class="c2" onclick="window.location.href='{:url('Card/wxconfig')}'">配置公众号</span>
        </div>
        <div class="mynav col-xs-12">基本信息</div>
        <div class="form-group col-xs-12">
            <label for="subname" class="col-xs-2 control-label redstar">商户名字</label>
            <div class="col-xs-10">
                <input type="text" class="form-control" id="subname" name="subname" placeholder="例如'商户名称'">
            </div>
        </div>
        <div class="form-group col-xs-12">
            <label for="cardname" class="col-xs-2 control-label redstar">会员卡名称</label>
            <div class="col-xs-10">
                <input type="text" class="form-control" id="cardname" name="cardname" placeholder="例如'周年纪念会员卡'">
            </div>
        </div>
        <div class="form-group col-xs-12">
            <label class="col-xs-2 control-label redstar">商户LOGO</label>
            <div class="col-xs-10">
                <label class="filelabel" style="margin-left: 0;" title="点击更换图片">
                    <input type="file" style="opacity: 0" data-for="logo_url">
                </label>
                <span style="vertical-align: bottom;color: #9fa19f;">图片建议尺寸:300像素*300像素,大小不超过1M</span>
                <span style="display: none;" id="logo_urlhidden"></span>
            </div>
        </div>
        <div class="form-group col-xs-12">
            <label for="" class="col-xs-2 control-label redstar">封面背景</label>
            <div class="col-xs-10 row">
                <div class="radio col-xs-12" style="margin-bottom: 20px;">
                        <input type="checkbox" name="bgstyle" value="1">
                        <label>
                            自定义图片
                        </label>
                        <label class="filelabel" title="点击更换图片">
                            <input type="file" style="opacity: 0" data-for="bgimg">
                        </label>
                        <span style="vertical-align: bottom;text-decoration:underline;color:#1AB394;cursor: pointer;" title="点击打开封面设计规范" onclick="window.open('https://mp.weixin.qq.com/cgi-bin/readtemplate?t=cardticket/card_cover_tmpl&type=info&lang=zh_CN')">封面设计规范</span>
                        <span style="display: none;" id="bgimghidden"></span>
                </div>
                <div class="radio col-xs-12">
                    <input type="checkbox" checked disabled>
                    <label>
                         背景颜色
                    </label>
                        <span class="pcolor" data-color="Color010" style="background-color: #63B359;"></span><span class="pcolor" data-color="Color020" style="background-color: #2C9F67;"></span><span class="pcolor" data-color="Color030" style="background-color: #509FC9;"></span><span class="pcolor" data-color="Color040" style="background-color: #5885CF;"></span><span class="pcolor" data-color="Color050" style="background-color: #9062C0;"></span><span class="pcolor" data-color="Color060" style="background-color: #D09A45;"></span><span class="pcolor" data-color="Color070" style="background-color: #E4B138;"></span><span class="pcolor" data-color="Color080" style="background-color: #EE903C;"></span><span class="pcolor" data-color="Color090" style="background-color: #DD6549;"></span><span class="pcolor" data-color="Color100" style="background-color: #CC463D;"></span>
                </div>
            </div>
        </div>
        <div class="form-group col-xs-12">
            <label for="" class="col-xs-2 control-label redstar">有效期</label>
            <div class="col-xs-10 row">
                <div class="radio col-xs-12">
                    <label>
                        <input type="radio" name="isforver" value="0" required>
                        固定日期区间
                    </label>
                    <input type="text" name="starttime" readonly placeholder="开始日期" onclick="laydate()" disabled>&nbsp;一&nbsp;<input type="text" name="endtime" readonly disabled placeholder="截止日期" onclick="laydate()">
                </div>
                <div class="radio col-xs-12">
                    <label>
                        <input type="radio" name="isforver" value="1" required>
                        永久有效
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group col-xs-12">
            <label for="" class="col-xs-2 control-label redstar">发放数量</label>
            <div class="col-xs-10">
                <input type="password" name="grantnum" class="form-control" id="" placeholder="">
            </div>
        </div>
        <div class="form-group col-xs-12">
            <label for="" class="col-xs-2 control-label redstar">会员卡优惠</label>
            <div class="col-xs-10">
                <div class="col-xs-12 row">
                    <label style="font-weight: 100;">
                        <input type="checkbox" name="isdiscount" id="isdiscount" value="1">
                        折扣优惠
                    </label>
                    <label style="font-weight: 100;margin-left: 50px;">
                        <input type="checkbox" name="isintegral" id="isintegral" value="1">
                        积分优惠
                    </label>
                    <label style="font-weight: 100;margin-left: 50px;">
                        <input type="checkbox" name="ischarge" id="ischarge" value="1">
                        充值优惠
                    </label>
                </div>
                <div class="col-xs-12 row" style="background-color: #F2F2F2;padding-bottom: 23px;position: relative;">
                    <div style="position: absolute;height: 80%;width: 1px;background-color: #C8C8C8;top:10%;left: 33%;"></div>
                    <div style="position: absolute;height: 80%;width: 1px;background-color: #C8C8C8;top:10%;left: 66%;"></div>
                    <div class="col-xs-4 s1">
                        <div style="height: 60px;line-height: 60px;"><span class="bluelable"></span>折扣信息</div>
                        <div class="mb10">会员卡买单<input style="width: 30px;" name="discountvalue" type="number" step="0.1" disabled required>折</div>
                        <div style="color: #999999;">请填写1-9.9之间的数字,精确到小数点后1位</div>
                    </div>
                    <div class="col-xs-4 s2">
                        <div style="height: 60px;line-height: 60px;"><span class="bluelable"></span>积分优惠</div>
                        <div class="mb10">激活会员卡送<input style="width: 30px;" type="number" name="activation" required disabled>积分</div>
                        <div>每消费<input style="width: 30px;" type="number" name="pernum" required disabled>元,送<input style="width: 30px;" type="number" name="giveintegral" required disabled>积分</div>
                    </div>
                    <div class="col-xs-4 s3" id="chargearea">
                        <div style="height: 60px;line-height: 60px;"><span class="bluelable"></span>充值优惠</div>
                        <div class="mb10">充值<input name="gradient[]" style="width: 30px;" type="number" required disabled>元,送<input style="width: 30px;" name="backmoney[]" type="number" required disabled>元<span class="add disabled">新增</span></div>

                    </div>
                </div>
            </div>
        </div>
        <div class="form-group col-xs-12">
            <label for="" class="col-xs-2 control-label redstar">适用门店</label>
            <div class="col-xs-10 row">
                <div class="radio col-xs-12">
                    <label>
                        <input type="radio" name="isappshop" value="1">
                        本商户下所有门店
                    </label>
                </div>
                <div class="radio col-xs-12">
                    <label>
                        <input type="radio" name="isappshop" value="0">
                        部分门店
                        <span id="insertarea">
                        </span>
                        <span style="margin-left: 30px;color: #419eff;" id="selectbtn">+选择</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="mynav col-xs-12">使用说明</div>
        <div class="form-group col-xs-12">
            <label for="privilege" class="col-xs-2 control-label redstar">特权说明</label>
            <div class="col-xs-10">
                <textarea rows="8" class="form-control" name="privilege" id="privilege" placeholder="会员卡优惠、特权详情"></textarea>
            </div>
        </div>
        <div class="form-group col-xs-12">
            <label for="notice" class="col-xs-2 control-label">使用提醒</label>
            <div class="col-xs-10">
                <input name="notice" class="form-control" id="notice" placeholder="卡券使用提醒，字数上限为16个汉字。" maxlength="16" />
            </div>
        </div>
        <div class="form-group col-xs-12">
            <label for="instructions" class="col-xs-2 control-label">使用须知</label>
            <div class="col-xs-10">
                <textarea rows="4" name="instructions" class="form-control" id="instructions" placeholder="例如'积分不能兑换现金'"></textarea>
            </div>
        </div>
        <div class="form-group col-xs-12">
            <label for="servicetel" class="col-xs-2 control-label">客服电话</label>
            <div class="col-xs-10">
                <input type="tel" class="form-control" name="servicetel" id="servicetel" placeholder="">
            </div>
        </div>
        <div class="mynav col-xs-12">基本信息</div>
        <div class="form-group col-xs-12">
            <label for="" class="col-xs-2 control-label">描述图片</label>
            <div class="col-xs-10">
                <label class="filelabel" style="margin-left: 0;" title="点击更换图片">
                    <input type="file" style="opacity: 0" data-for="desimg">
                </label>
                <span style="vertical-align: bottom;color: #9fa19f;">图片建议尺寸:900像素*500像素,大小不超过2M</span>
                <span style="display: none;" id="desimghidden"></span>
            </div>
        </div>
        <div class="form-group col-xs-12">
            <label for="destext" class="col-xs-2 control-label">描述文字</label>
            <div class="col-xs-10">
                <textarea rows="6" class="form-control" id="destext" name="destext" placeholder="请输入描述内容"></textarea>
            </div>
        </div>
        <div class="mynav col-xs-12"></div>
        <div class="form-group col-xs-12">
            <div class="col-xs-offset-2 col-xs-10">
                <button type="submit" name="save" value="0" class="btn btn-primary save">保存</button>
                <button type="submit" name="save" value="1" class="btn btn-primary save">保存并上架</button>
                <button type="reset" class="btn btn-warning" id="cancel">取消</button>
            </div>
        </div>
    </form>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
{load href="/static/js/layer/layer.js,/static/js/laydate/laydate.js" /}
<script>
    var color="";//全局颜色存储
    //颜色监听
    $(".pcolor").on("click",function () {
        $(this).html('<img src="/static/img/select.svg">').siblings(".pcolor").empty();
        color=this.getAttribute("data-color");
    })

//    文件上传监听
    $("input[type=file]").on("change", function(e) {
        var _this=this;
        if(!/image\/\w+/.test(this.files[0].type)) {
            alert("看清楚，这个需要图片！");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(this.files[0]);
        reader.onload = function() {
            $(_this).parent(".filelabel").css("background-image","url("+this.result+")");
        }
        var formData=new FormData();
        formData.append("ajaxfile",this.files[0]);
        layer.load(1,{
            shade: 0.8
        });
        $.ajax({
            url: 'http://localhost/index.php/api/notify/uploadfile' ,
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            dataType:"json",
            contentType: false,
            processData: false,
            success: function (returndata) {
                layer.closeAll();
                if(returndata.status=="1"){
                    if(_this.getAttribute("data-for")=="bgimg"){
                        document.getElementById("bgimghidden").innerHTML='<input type="hidden" name="bgimg" value="'+returndata.url+'" />';
                    }else if(_this.getAttribute("data-for")=="desimg"){
                        document.getElementById("desimghidden").innerHTML='<input type="hidden" name="desimg" value="'+returndata.url+'" />';
                    }else{
                        document.getElementById("logo_urlhidden").innerHTML='<input type="hidden" name="logo_url" value="'+returndata.url+'" />';
                    }
                }else{
                    layer.msg(returndata.msg);
                }
                //console.log(returndata);
            },
            error: function (returndata) {
                layer.closeAll();
                //console.log(returndata);
            }
        });
    })

//    点击增加按钮事件
    $(".add").on("click",function () {
        $("#chargearea").append('<div class="mb10">充值<input name="gradient[]" style="width: 30px;" type="number" required>元,送<input style="width: 30px;" name="backmoney[]" type="number" required>元<span class="del">删除</span></div>');
    })

//    点击删除按钮委托
    $("#chargearea").on("click",".del",function () {
        $(this).parent(".mb10").remove();
    })

//    三个监听
    $("#isdiscount").on("change",function () {
        if(this.checked ===true ){
            $(".s1 input").prop("disabled",false);
        }else{
            $(".s1 input").prop("disabled",true);
        }
    })

    $("#isintegral").on("change",function () {
        if(this.checked ===true ){
            $(".s2 input").prop("disabled",false);
        }else{
            $(".s2 input").prop("disabled",true);
        }
    })

    $("#ischarge").on("change",function () {
        if(this.checked ===true ){
            $(".s3 input").prop("disabled",false);
        }else{
            $(".s3 input").prop("disabled",true);
        }
    })

//    点击选择按钮
    $("#selectbtn").on("click",function () {
        //捕获页
        layer.open({
            type: 1,
            shade: 0.7,
            title: false, //不显示标题
            area: ['620px', '460px'], //宽高
            content: $('#layerhtml'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function(){

            }
        });
    })

//    门店搜索点击监听
    $(".search").on("click",function () {
        var keyword=$("#shopname").val();
        if(!!keyword){
            $(".shoptr").each(function () {
                if($(this).find(".shoptd").html().indexOf(keyword)!==-1){
                    $(this).show();
                }else{
                    $(this).hide();
                }
            });
        }else{
            $(".shoptr").show();
        }
    })

//    门店选择监听
    $(".selectshop").on("change",function () {
        var shtml='';
        $(".selectshop:checked").each(function () {
            shtml+='<button class="btn btn-info btn-sm">'+$(this).attr("data-shopname")+'</button><input type="hidden" name="shopid[]" value="'+$(this).val()+'"/>';
        })
        $("#insertarea").html(shtml);
    })

//    适用门店监听
    $("input[name=isappshop]").on("change",function(){
        if(this.value==1){
            $("#insertarea").html("");
            $(".selectshop").prop("checked",false);
        }
    })

//    有效期选择监听
    $("input[name=isforver]").on("change",function (){
        if(this.value==1){
            $("input[name=starttime]").prop("disabled",true);
            $("input[name=endtime]").prop("disabled",true);
        }else{
            $("input[name=starttime]").prop("disabled",false);
            $("input[name=endtime]").prop("disabled",false);
        }
    })
    
    $("#myform").on("submit",function () {
        var formobj=new FormData(this);
        if(document.querySelector("input[name=bgstyle]").checked==true){
            var bgimg=!!$("input[name=bgimg]")?$("input[name=bgimg]").val():"";
            if(!!bgimg){
                formobj.append("background_pic_url",bgimg);
            }else{
                layer.msg("请选择一张封面背景");
                return false;
            }
        }
        if(!formobj.has("logo_url")){
            layer.msg("请选择一张图片做为商家LOGO");
            return false;
        }
        if(!!color){
            formobj.append("color",color);//背景是寸颜色
        }else{
            layer.msg("请选择一种背景颜色");
            return false;
        }
        for(var pair of formobj.entries()){
            console.log(pair[0]+':'+pair[1]);
        }
        $.ajax({
            url: "{:url('Card/addcard')}",
            type: "POST",
            data: formobj,
            processData: false,  // 不处理数据
            contentType: false,   // 不设置内容类型
            success: function (returndata) {
                console.log(returndata);
                if(returndata.status=="1"){

                }else{

                }
                //console.log(returndata);
            },
            error: function (returndata) {
                //console.log(returndata);
            }
        });
        //使用异步发送
    })
</script>
</body>
</html>